<template>
  <div class="ruleApplication">
    <el-row style="padding: 20px">
      <el-col :span="5">
        <div style=" border: 1px solid #d8dce5; height: 700px;" class="grid-content bg-purple">
          <el-input
            v-model="columnName"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="width: 100%; margin-bottom: 20px"
            placeholder="输入关键字进行过滤"
          >
          </el-input>
          <el-tree
            ref="tree"
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="grid-content bg-purple-light" style=" border: 1px solid #d8dce5; height: 700px;margin:0 20px">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column align="center" draggable prop="date" label="日期">
              <template slot-scope="scope">
                <draggable
                  :group="{ name: 'date', pull: 'clone', put: false }"
                  @end="handleEnd"
                >
                  <div class="cell" style="color: red" :key="scope.row.date">
                    {{ scope.row.date }}
                  </div>
                </draggable>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="14">
        <div style="padding-bottom: 20px">
          <span>数据校验任务： 3</span>
          <span>缺省规则： 是否全为数字</span>
          <el-button @click="addCol" type="primary" plain>加一列</el-button>
          <el-button type="primary" plain>存储</el-button>
          <el-button type="primary" plain>导入列名</el-button>
          <el-button type="primary" plain>运行</el-button>
        </div>
        <div class="grid-content bg-purple">
          <el-table
            @cell-click="cellClick"
            @cell-mouse-leave="cellMouseLeave"
            :data="ruleData"
            border
            style="width: 100%"
          >
            <el-table-column align="center" prop="date" label="日期" width="180">
              <template slot-scope="{ row }">
                <template v-if="row.edit">
                  <el-input
                    v-model="row.date"
                    minlength="2"
                    maxlength="10"
                    size="small"
                  />
                </template>
                <span v-else
                  >{{ row.date }}
                  <draggable
                    v-if="!row.date"
                    group="date"
                    draggable="false"
                    :id="row.date"
                    @add="addCode(row, row.date)"
                  >
                  </draggable>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="姓名" width="180">
              <template slot-scope="{ row }">
                <template v-if="row.edit">
                  <el-input
                    v-model="row.name"
                    minlength="2"
                    maxlength="10"
                    size="small"
                  />
                </template>
                <span v-else
                  >{{ row.name }}
                  <draggable
                    v-if="!row.name"
                    group="date"
                    draggable="false"
                    :id="row.date"
                    @add="addCode(row, row.name)"
                  >
                  </draggable>
                </span>
              </template>
            </el-table-column>
             <el-table-column align="center" prop="hobby" label="爱好">
              <template slot-scope="{ row }">
                <template v-if="row.edit">
                  <el-input
                    v-model="row.hobby"
                    minlength="2"
                    maxlength="10"
                    size="small"
                  />
                </template>
                <span v-else
                  >{{ row.hobby }}
                  <draggable
                    v-if="!row.hobby"
                    group="date"
                    draggable="false"
                    :id="row.date"
                    @add="addCode(row, row.hobby)"
                  >
                  </draggable>
                </span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="地址">
              <template slot-scope="{ row }">
                <template v-if="row.edit">
                  <el-input
                    v-model="row.address"
                    minlength="2"
                    maxlength="10"
                    size="small"
                  />
                </template>
                <span v-else
                  >{{ row.address }}
                  <draggable
                    v-if="!row.address"
                    group="date"
                    draggable="false"
                    :id="row.date"
                    @add="addCode(row, row.address)"
                  >
                  </draggable>
                </span>
              </template>
            </el-table-column>
          </el-table>
           
          <!-- <pagination
              v-show="total>0"
              :total="total"
              :page.sync=""
              :limit.sync=""
              @pagination=""
            /> -->
        </div>
      </el-col>
    </el-row>
    <el-dialog title="请输入列名称" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="列名称">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "index",
  components: { draggable },
  data() {
    return {
      //过滤树节点
      columnName:undefined,
      //拖拽到的单元格值
      currentVal: "",
      dialogFormVisible: false,
      form: {
        name: "",
      },
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [
        {
          date: "2016-05-02",
        },
        {
          date: "2016-05-04",
        },
        {
          date: "2016-05-01",
        },
        {
          date: "2016-05-03",
        },
      ],
      ruleData: [
        {
          date: "2016-05-02",
          name: "",
          address: null,
          hobby:"吃饭",
          edit: false,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          hobby:"唱歌",
          edit: false,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          hobby:"睡觉",
          address: "上海市普陀区金沙江路 1519 弄",
          edit: false,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          hobby:"打豆豆",
          address: "上海市普陀区金沙江路 1516 弄",
          edit: false,
        },
      ],
    };
  },
  computed: {},
  watch: {
    columnName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.data = JSON.parse(this.$route.query.data);
    
  },
  mounted() { },
  methods: {
    //过滤方法
    filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
    //拖拽单元格
    handleEnd(e) {
      if (this.currentVal) {
        return;
      }

      // this.codeValue = e.from.innerText;
      // this.reset();
      // add({
      //   dimensionId: this.row.dimensionId,
      //   codeValue: this.codeValue,
      //   colnameId: this.colnameAliasId,
      // }).then((response) => {
      //   if (response.code === 0) {
      //     this.refreshRow(this.row.dimensionId);
      //   }
      // });
    },
    addCode(row, val) {
      this.row = row;
      this.currentVal = val;
    },
    //鼠标移出单元格
    cellMouseLeave(row) {
      if (row.edit) {
        row.edit = false;
        // if (row.code) {
        //   let data = {
        //     id: row.id,
        //     code: row.code
        //   }
        //   updateValue(data).then((res) => {
        //     if (res.data) {
        //       this.msgSuccess('指标代码已修改')
        //     }
        //   }).catch(() => {
        //     this.msgError('指标代码修改失败,请稍后重试')
        //   })
        // }
      }
    },
    //单击单元格可编辑
    cellClick(row, column) {
      row.edit = true;
    },
    addCol() {
      this.dialogFormVisible = true;
      this.ruleData.forEach((item) => {});
    },
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>
<style lang="less">
.ruleApplication {
  .cell {
    color: #000 !important;
  }
}
</style>
